<!-- 开启比赛页面 -->
<template>
  <div class="app-container">
    <el-form ref="contestTable" :model="contestTable" label-width="100px">
      <!-- 比赛游戏名称区域 -->
      <el-form-item label="比赛游戏名称">
        <el-select
          v-model="contestTable.contestId"
          placeholder="请选择比赛项目"
        >
          <el-option
            v-for="item in gameName"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
          ></el-option>
          <el-option
            disabled
            label="其他游戏请联系管理员"
            value="管理员"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 商家公司名称区域 -->
      <el-form-item label="商家公司名称">
        <el-select
          v-model="contestTable.contestMerchants"
          placeholder="请选择公司名称"
        >
          <el-option
            v-for="merchants in items"
            :key="merchants.name"
            :label="merchants.name"
            :value="merchants.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 比赛日期区域 -->
      <el-form-item label="比赛时间">
        <div class="block">
          <el-date-picker
            v-model="contestTable.startTime"
            type="datetime"
            placeholder="选择比赛时间"
            :picker-options="pickerOptions0"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <!-- 按钮区域 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit(contestTable)"
          >立即创建</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import merchantApi from "@/api/merchant/merchant";
import conteststartApi from "@/api/merchant/conteststart";

export default {
  data() {
    return {
      items: [],
      // 游戏名称列表
      gameName: [],
      // 供应商公司名称
      contestTable: {
        contestId: "",
        contestMerchants: "湖北KG集团有限责任公司",
        startTime: "",
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  methods: {
    // 创建比赛项目
    onSubmit(contestTable) {
      // 判断时间是否为空
      if (
        contestTable.startTime === "" ||
        contestTable.startTime === undefined
      ) {
        this.$message.error("请选择正确的比赛时间");
      } else if (
        contestTable.contestId === "" ||
        contestTable.contestId === undefined
      ) {
        this.$message.error("请选择正确的比赛游戏名称");
      } else {
        // 调用后端接口，完成比赛表添加
        conteststartApi.addContestTable(contestTable).then(() => {
          this.$notify({
            title: "添加成功",
            message: "比赛添加完成，快去喊小伙伴们参赛",
            type: "success",
          });
        });
      }
    },
  },
  created() {
    // 查询所有供应商
    merchantApi.getMerchantAll().then((response) => {
      this.items = response.data.items;
    });
    // 查询所有游戏比赛名称
    merchantApi.getGameNameAll().then((response) => {
      this.gameName = response.data.gamenameList;
    });
  },
};
</script>
<style scoped>
</style>